<template>
	<view class="page-address gray-page">
		<!-- 快手不支持获取收货地址 -->
		<!-- #ifndef MP-KUAISHOU -->
			<view class="get-wechat-address flex-between-center" @tap="onGetWechatAddress">
				<view class="flex-center">
					<image class="wechat-icon mr-4" :src="'/static/other/' + providerIconSrc" mode="widthFix"></image>
					<text>获取收货地址</text>
				</view>
				<image class="arrow-right" src="/static/other/arrow-right.svg" mode="widthFix"></image>
			</view>
		<!-- #endif -->
		<view class="address-list">
			<view @tap="onChooseAddress(item)" v-for="(item,index) in list" :key="item.id"
				class="address-item flex-between-center">
				<view class="left-info">
					<view class="flex-start-center-gap-10">
						<view v-if="item.isDefault" class="default-icon flex-center">默认</view>
						<text class="address-text">{{item.area}}{{item.address}}</text>
					</view>
					<text class="address-contact">{{item.consignee}}&nbsp;&nbsp;{{item.phone}}</text>
				</view>
				<image @tap.stop="onEdit(item)" class="edit-icon" src="/static/other/edit-address.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="add-box">
			<view class="custom-button full-button" @tap="onAdd">
				<u-button type="primary" shape="circle" text="新增地址" icon="plus"></u-button>
			</view>
		</view>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import { getProviderIconSrc } from "../../common/js/method";
	const list = ref([]);
	import {
		onLoad,
		onShow,
	} from '@dcloudio/uni-app';

	const providerIconSrc = getProviderIconSrc();

	const getList = async () => {
		// 接口是分页的
		const res = await uni.$request('/api/user/address/select', {
			pageNo: 1,
			pageSize: 100,
		});
		list.value = res.data.addressList;
	}
	const addAddress = async (address) => {
		return await uni.$request('/api/user/address/add', {
			/**
			 * 详细地址
			 */
			address: address.detailInfo,
			/**
			 * 所在地区
			 */
			area: [address.provinceName, address.cityName, address.countyName].join('/'),
			/**
			 * 收货人
			 */
			consignee: address.userName,
			/**
			 * 是否默认地址，0：不是，1：是
			 */
			isDefault:  0,
			/**
			 * 联系电话
			 */
			phone: address.telNumber,
		});

	}
	
	const onEdit = (item) => {
		const data = item;
		uni.navigateTo({
			url: `/pages/address/address-edit?type=edit&data=${JSON.stringify(data)}`,
		})
	}
	const onAdd = (item) => {
		uni.navigateTo({
			url: `/pages/address/address-edit`,
		})
	}
	const onGetWechatAddress = () => {
		uni.chooseAddress({
			async success(address) {
				// cityName: "广州市",
				// countyName: "海珠区",
				// detailInfo: "新港中路397号",
				// errMsg: "chooseAddress:ok",
				// nationalCode: "510000",
				// postalCode: "510000",
				// provinceName: "广东省",
				// telNumber: "020-81167888",
				// userName: "张三",
				console.log('微信地址信息', address);
				if(!address.userName) return;
				let res = await addAddress(address);
				uni.setStorageSync('choosedAddresInfo', {
					id: res.data.id,
					address: address.detailInfo,
					area: [address.provinceName, address.cityName, address.countyName].join('/'),
					consignee: address.userName,
					phone: address.telNumber,
				});
				uni.navigateBack()
			}
		})
	};
	// 点击一个地址，带回上个页面
	const onChooseAddress = (item) => {
		// 存储数据
		uni.setStorageSync('choosedAddresInfo', {
			id: item.id,
			address: item.address,
			area: item.area,
			consignee: item.consignee,
			phone: item.phone,
		})
		uni.navigateBack()
	}
	onShow(() => {
		getList();
	})
</script>

<style lang="scss" scoped>
	.page-address {
		padding: 40rpx  32rpx calc(212rpx + 40rpx) 32rpx;

		.get-wechat-address {
			// height: 56px;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.02);
			padding: 32rpx;

			.wechat-icon {
				width: 40rpx;
				height: 38rpx;
			}

			.arrow-right {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.address-list {
			.address-item {
				margin-top: 40rpx;
				border-radius: 16rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.02);
				padding: 32rpx;

				.left-info {
					display: flex;
					flex-direction: column;
					gap: 20rpx;

					.default-icon {
						flex-shrink: 0;
						width: 72rpx;
						padding: 4rpx 0 6rpx 0;
						border-radius: 4rpx;
						box-sizing: border-box;
						border: 2rpx solid rgba(69, 145, 230, 1);
						/** 文本 */
						font-size: 28rpx;
						line-height: 1;
						color: rgba(69, 145, 230, 1);
					}

					.address-text {
						font-size: 28rpx;
						font-weight: bold;
						line-height: 40rpx;
						color: rgba(56, 56, 56, 1);
					}

					.address-contact {
						font-size: 24rpx;
						line-height: 36rpx;
						color: rgba(166, 166, 166, 1);
					}
				}

				.edit-icon {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.add-box {
			box-sizing: border-box;
			width: 100%;
			background: #fff;
			padding: 32rpx 32rpx 68rpx 32rpx;
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
</style>